{% extends "base.html" %}

{% block title %}添加收费记录{% endblock %}

{% block styles %}
<!-- 添加 Select2 的 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .select2-container {
        width: 100% !important;
    }
    /* 修复 input-group 中的 Select2 样式 */
    .input-group > .select2-container--bootstrap-5 {
        flex: 1 1 auto;
        width: 1% !important;
    }
    .input-group > .select2-container--bootstrap-5 .select2-selection {
        height: 100%;
        line-height: inherit;
        border-radius: 0.375rem 0 0 0.375rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 offset-md-2">
        <h2 class="mb-4">添加收费记录</h2>
        <form method="POST" id="paymentForm">
            <div class="mb-3">
                <label for="registration_id" class="form-label">选择注册信息</label>
                <div class="input-group">
                    <select class="form-control" id="registration_id" name="registration_id" required>
                        <option value="">请选择注册信息</option>
                        {% for registration in registrations %}
                        <option value="{{ registration.id }}" 
                                data-student="{{ registration.name }}"
                                data-class="{{ registration.grade }} {{ registration.year }} {{ registration.semester }}">
                            {{ registration.name }} - {{ registration.grade }} {{ registration.year }} {{ registration.semester }}
                        </option>
                        {% endfor %}
                    </select>
                    <a href="{{ url_for('add_registration') }}" class="btn btn-primary" target="_blank">添加注册信息</a>
                    <button type="button" class="btn btn-secondary" id="refresh-registration">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>

            <div class="mb-3">
                <label for="payment_date" class="form-label">收费日期</label>
                <input type="date" class="form-control" id="payment_date" name="payment_date" required>
            </div>
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">收费项目</h5>
                </div>
                <div class="card-body">
                    {% for project in projects %}
                    <div class="row mb-2 align-items-center">
                        <div class="col-md-6">
                            <label class="mb-0">{{ project.name }}</label>
                            <input type="hidden" name="projects[]" value="{{ project.name }}">
                        </div>
                        <div class="col-md-6">
                            <input type="number" step="0.01" class="form-control" name="amounts[]" placeholder="金额">
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="mb-3">
                <label for="account" class="form-label">收款账号</label>
                <div class="input-group">
                    <select class="form-control" id="account" name="account" required>
                        <option value="">请选择收款账号</option>
                        {% for account in accounts %}
                        <option value="{{ account.account }}">{{ account.account }}</option>
                        {% endfor %}
                    </select>
                    <a href="{{ url_for('add_account') }}" class="btn btn-primary" target="_blank">添加收款账号</a>
                    <button type="button" class="btn btn-secondary" id="refresh-account">
                        <i class="fas fa-sync-alt"></i> 刷新
                    </button>
                </div>
            </div>
            <div class="mb-3">
                <label for="summary" class="form-label">摘要</label>
                <textarea class="form-control" id="summary" name="summary" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">提交</button>
                <a href="{{ url_for('list_payments') }}" class="btn btn-secondary">返回</a>
            </div>
        </form>
    </div>
</div>


{% endblock %} 

{% block scripts %}
<!-- 添加 Select2 的 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/i18n/zh-CN.js"></script>

<script>
    $(document).ready(function() {
        // 初始化注册信息选择框
        $('#registration_id').select2({
            theme: 'bootstrap-5',
            language: 'zh-CN',
            placeholder: '请选择注册信息',
            allowClear: true,
            dropdownParent: $('#registration_id').parent()
        });

        // 初始化收款账号选择框
        $('#account').select2({
            theme: 'bootstrap-5',
            language: 'zh-CN',
            placeholder: '请选择收款账号',
            allowClear: true,
            dropdownParent: $('#account').parent()
        });

        // 刷新注册信息列表
        $('#refresh-registration').click(function(e) {
            e.preventDefault();
            $.get(window.location.href, function(data) {
                let tempDiv = $('<div>').html(data);
                let newOptions = tempDiv.find('#registration_id').html();
                $('#registration_id').html(newOptions).trigger('change');
            });
        });

        // 刷新收款账号列表
        $('#refresh-account').click(function(e) {
            e.preventDefault();
            $.get(window.location.href, function(data) {
                let tempDiv = $('<div>').html(data);
                let newOptions = tempDiv.find('#account').html();
                $('#account').html(newOptions).trigger('change');
            });
        });
    });

    // 设置收费日期默认值为当前日期
    document.addEventListener('DOMContentLoaded', function() {
        // 获取本地时间
        const now = new Date();
        // 处理时区，确保使用本地日期
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const today = `${year}-${month}-${day}`;
        
        document.getElementById('payment_date').value = today;
    });
</script>

{% endblock %}
